<template>
  <div class="container">
    <div class="head" @click="goback">
      <i class="iconfont icon-zuojiantou"></i>
      <input type="text" v-model="inpval"
      :placeholder="deftSearch"
      @input="search(inpval)"
      >
      <!-- 搜索相关内容 -->
      <div class="pos" v-show="show">
        <h4 @click="tosite(inpval)">搜索'{{inpval}}'</h4>
        <ul class="sear-list">
          <li v-for="(item, index) in allMatch" :key="index" @click="tosite(item.keyword)">
            <i class="iconfont">&#xe62b;</i>
            <p class="title">{{item.keyword}}</p>
          </li>
        </ul>
      </div>
    </div>
        <!-- 子路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'search',
  data () {
    return {
      inpval: '',
      deftSearch: '',
      allMatch: [],
      timer: null,
      show: false
    }
  },
  methods: {
    goback () {
      window.history.go(-1)
    },
    tosite (val) {
      this.show = false
      this.inpval = val
      this.$router.push({ name: 'site', params: { val } })
    },
    search (val) {
      console.log(val)
      const that = this
      if (val) {
        this.show = true
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          that.axios.get(`/api/search/suggest?keywords=${val}&type=mobile`).then((res) => { // 输入框输入时，调用到你的搜索结果
            console.log(res.data)
            if (res.data.code === 200) {
              this.allMatch = res.data.result.allMatch
            }
          })
        }, 300)
      } else {
        this.show = false
      }
    },
    getDeft () {
      this.$axios.get('/api/search/default').then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.deftSearch = res.data.data.showKeyword
        }
      })
    }
  },
  mounted () {
    this.getDeft()
  }
}
</script>
<style lang="stylus" scoped>
.sear-list
  width 100%
  li
    line-height .8rem
    display flex
    .iconfont
      font-size .4rem
      width .5rem
      line-height .8rem
      padding-left .2rem
    .title
      flex 1
.container
  padding 0 .3rem
.head
  height .7rem
  position relative
  margin-bottom 1rem
  .iconfont
    font-size .36rem
    margin-right .2rem
    line-height 1rem
  input
    border none
    border-bottom 1px solid #aaaaaa
    width 85%
    line-height .7rem
    outline 0 none
  .pos
    position absolute
    width 83%
    left 9.5%
    background pink
.ell
  overflow hidden
  white-space nowrap
  text-overflow: ellipsis
.ar
  font-size .22rem
  color #999
  span
    width 1.4rem
.all
  height 1rem
  padding 0 .3rem
  line-height 1rem
  font-size .3rem
  .allnum
    font-size .22rem
    margin-left .1rem
    color #999
</style>
